<template>
  <div class="video-player">
    <video controls :src="videoUrl" class="video" width="100%">
      您的浏览器不支持 HTML5 视频。
    </video>
    <h1>{{ videoTitle }}</h1>
    <p class="video-intro">{{ videoIntro }}</p>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { useRoute } from 'vue-router';

const route = useRoute();
const videoUrl = ref('http://codelover.club/coursefiles/lnnpREORzoIdSs-hRgPHOKXVIzwM.mp4');
const videoTitle = ref('');
const videoIntro = ref('');

onMounted(() => {
  const videoId = Number(route.params.id);
  // 根据视频 ID 映射到具体的标题和简介，视频地址统一使用指定的地址
  switch (videoId) {
    case 1:
      videoTitle.value = '泰坦尼克号';
      videoIntro.value = '《泰坦尼克号》是一部经典的爱情灾难电影，讲述了穷画家杰克和贵族女露丝抛弃世俗的偏见坠入爱河，最终杰克把生存的机会让给了露丝的感人故事。影片将爱情与灾难完美结合，那惊心动魄的场景令人难以忘怀。';
      break;
    case 2:
      videoTitle.value = '黑客帝国';
      videoIntro.value = '《黑客帝国》构建了一个充满科幻色彩的虚拟世界，主角尼奥发现看似正常的现实世界实际上是由一个名为“矩阵”的计算机人工智能系统控制的。在反抗组织的帮助下，尼奥开始了对抗矩阵的冒险之旅，引发人们对现实与虚拟的深度思考。';
      break;
    case 3:
      videoTitle.value = '舌尖上的中国';
      videoIntro.value = '《舌尖上的中国》是一部美食纪录片，它以美食为窗口，介绍了中国各地的特色美食和与之相关的风土人情、历史文化。通过这部纪录片，观众可以领略到中华美食的博大精深，感受中国人对美食的热爱和对生活的追求。';
      break;
    case 4:
      videoTitle.value = '你的名字';
      videoIntro.value = '《你的名字》是一部温暖而浪漫的动画电影，讲述了住在东京的少年立花泷和深山乡村女高中生宫水三叶因为某个契机灵魂互换的奇妙故事。在寻找彼此的过程中，他们逐渐揭开了隐藏在互换背后的神秘真相，谱写了一段跨越时空的动人恋曲。';
      break;
    // 可以继续添加其他视频 ID 的映射
    default:
      videoTitle.value = '默认视频';
      videoIntro.value = '这是一个默认视频。';
  }
});
</script>

<style scoped>
.video-player {
  padding-top: 80px;
  text-align: center;
}

.video {
  width: 100%; /* 让视频全屏宽度 */
  max-height: 90vh; /* 限制最大高度为视口高度的 90% */
  object-fit: contain; /* 保持视频比例 */
}

.video-intro {
  padding: 20px;
  text-align: left;
  max-width: 800px;
  margin: 0 auto;
}
</style>